<template>
  <PageContainer>
    <a-card :bordered="false">
      <a-row>
        <a-col :span="8">
          <a-textarea
            v-model:value="decryptStr"
            placeholder="请输入待解密的内容，然后点击【解密>>】按钮进行解密"
            :rows="18"
            show-count
          />
        </a-col>
        <a-col :span="8" class="space-align-block">
          <a-space direction="vertical" align="baseline" :size="100">
            <a-button type="primary" @click="dataSourceDecrypt">解密>></a-button>
            <a-button type="primary" @click="dataSourceEncrypt">{{ '<<加密' }}</a-button>
          </a-space>
        </a-col>
        <a-col :span="8">
          <a-textarea
            v-model:value="encryptStr"
            placeholder="请输入待加密的内容，然后点击【<<加密】按钮进行加密"
            :rows="18"
            show-count
          />
        </a-col>
      </a-row>
    </a-card>
  </PageContainer>
</template>

<script setup lang="ts">
import { PageContainer as PageContainer } from '@ant-design-vue/pro-layout';
import * as dataSourceDesApi from '@/api/tools/dataSourceDes';
import { message } from 'ant-design-vue';

let encryptStr = ref();
let decryptStr = ref();

function dataSourceEncrypt() {
  if (!encryptStr.value) {
    message.warn('请输入待加密内容！');
    return;
  }
  dataSourceDesApi.dataSourceEncrypt({ str: encryptStr.value }).then(jsonResult => {
    if (!jsonResult) {
      return;
    }
    decryptStr.value = jsonResult.result;
  });
}

function dataSourceDecrypt() {
  if (!decryptStr.value) {
    message.warn('请输入待解密内容！');
    return;
  }
  dataSourceDesApi.dataSourceDecrypt({ str: decryptStr.value }).then(jsonResult => {
    if (!jsonResult) {
      return;
    }
    encryptStr.value = jsonResult.result;
  });
}
</script>

<style lang="less" scoped>
.space-align-block {
  margin: 80px 40px;
  padding: 4px;
  flex: none;
}
</style>
